<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>箭头函数不适用的case</title>
</head>
<body>
  <button>点击事件</button>
  <script>
    /**
     * 1. 箭头函数没有构造函数
     * 2. 箭头函数会改变，交互事件this的绑定
     * 3. 箭头函数是没有argument对象
    */

    // 1. 剪头函数的构造函数，会改变this指向
    const Person = (name) => {
      this.name = name;
      console.log(this.name);
    }
    // TypeError: Person is not a constructor
    const person = new Person('小陈');

    const Student = function (name) {
      this.name = name;
      console.log(this.name);
    }
    const student = new Student('小明');

    // 2. 交互事件绑定，箭头函数会改变this指向
    const buttonEle = document.querySelector('button');
    buttonEle.onclick = () => {
      // 穿透当前作用域，指向了父级作用域
      console.log(this); // Window
    }
    buttonEle.onclick = function () {
      // 指向当前作用域，指向了button元素
      console.log(this); // button
    }

    // 3. arguments
    function apply1 () {
      console.log(111, arguments); // 获取到Argument对象
    }
    apply1(1, 2);

    const apply2 = () => {
      // arguments is not defined,说明剪头函数没有arguments对象
      console.log(arguments);
    }
    apply2(3, 4);
    // 剪头函数中解决arguments对象的方案，使用rest参数
    const apply3 = (...args) => {
      // [7, 8]
      console.log(args);
    }
    apply3(7, 8);
   </script>
</body>
</html>